<template>
    <div class="page-auth-layout">
        <div class="layout layout-with-news-feed">
            <!-- begin news-feed -->
            <div class="news-feed">
                <div class="news-image" style="background-image: url('/img/login-bg/login-bg-11.jpg');"></div>
                <div class="news-caption">
                    <h4 class="caption-title"><b>系统</b> 名称中文</h4>
                    <p>
                        系统介绍英文
                    </p>
                </div>
            </div>
            <!-- end news-feed -->
            <!-- begin right-content -->
            <div class="right-content">
                <!-- begin right-content-header -->
                <div class="right-content-header">
                    <div class="brand">
                        <span class="logo"></span> <b>系统</b> 名称中文
                        <small>系统介绍英文</small>
                    </div>
                </div>
                <!-- end right-content-header -->
                <!-- begin right-content-content -->
                <div class="right-content-main">
                    <slot></slot>
                    <hr />
                    <p class="copyright">
                        Copyrights &copy; 2018 by uinnova. All Rights Reserved
                    </p>
                </div>
                <!-- end right-content-content -->
            </div>
            <!-- end right-container -->
        </div>
    </div>
</template>

<style lang="scss" scoped>
.page-auth-layout {
    font-size: 12px;
    line-height: 1.42857143;

    * {
        box-sizing: border-box;
    }

    .layout {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .news-feed {
        position: fixed;
        top: 0;
        right: 500px;
        bottom: 0;
        left: 0;
        overflow: hidden;
        transform: translateZ(0);

        .news-image {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }

        .news-caption {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 60px 60px 30px;
            color: rgba(255, 255, 255, 0.75);
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 100%);
            font-size: 18px;

            .caption-title {
                margin-top: 0;
                margin-bottom: 0.5rem;
                color: #fff;
                font-weight: normal;
                font-size: 36px;
                line-height: 1.2;

                b {
                    font-weight: bolder;
                }
            }

            p {
                margin-top: 0;
            }
        }
    }

    .right-content {
        float: right;
        width: 500px;

        .right-content-header {
            position: relative;
            top: 0;
            right: 0;
            left: 0;
            padding: 100px 60px 0;

            .brand {
                color: #242a30;
                font-size: 28px;

                .logo {
                    width: 28px;
                    height: 28px;
                }

                small {
                    display: block;
                    color: #707478;
                    font-size: 14px;
                }
            }
        }

        .right-content-main {
            padding: 30px 60px;
            color: #999;

            hr {
                height: 1px;
                border: none;
                margin: 1rem 0;
                background-color: #f1f3f5;
            }

            .copyright {
                margin-top: 0;
                color: #929ba1;
                text-align: center;
            }
        }
    }
}
</style>
